<template>

  <div class="main">
    <div class="header">
      <div class="header-left fl" >
        <!--天气时间-->
        <div class="weather-box">
          <div class="data weather">
            <img id="weatherImg" :src="require('@/assets/images/weather/weather_img01.png')" alt="">
            <p class="time" id="time">{{nowTime}} {{nowWeek}}</p>
          </div>
        </div>
      </div>

      <div class="header-center fl">
        <div class="header-title">
          作业进度明细
        </div>
        <div class="header-img"></div>
      </div>
      <div class="header-right fl"></div>
      <div class="header-bottom fl"></div>

    </div>

    <div class="center">
      <div class="center-left fl">
        <div class="left-top rightTop border">
          <div class="title">基本信息</div>
          <div>
            <p class="memberFamilyClassicQuotes">有志者,事竟成,破釜沉舟,百二秦关终属楚; 苦心人,天不负,卧薪尝胆,三千越甲可吞吴。</p>
            <el-row style="margin-left: .4rem">
              <el-col :span="4">
                <!--照片-->
                <el-image v-if="memberFamily.icoPath != null"
                          fit="contain"
                          :src="memberFamily.icoPath"></el-image>
                <el-image v-else
                          fit="contain"
                          :src="require('@/assets/images/avatar/avatar11.png')"></el-image>
              </el-col>
              <el-col :span="20">
                <!--姓名 性别等-->
                <div class="memberFamilyInfo">姓名：{{memberFamily.userName}}</div>
                <div class="memberFamilyInfo" style="font-family: 微软雅黑">生日：{{memberFamily.birthdayTime}}</div>
              </el-col>
            </el-row>
          </div>
        </div>


        <div class="left-cen rightTop border">
          <div class="title">作业情况统计</div>

          <div>
            <div class="bar">
              <div class="barbox ">
                <ul class="clearfix">
                  <li class="pulll_left counter">
                    <!--
                    tag    数字的包装器    span
                     startValue    起始值    0
                     endValue    结束值    0
                     decimals    小数位数， 默认为 0    0
                     duration    动画持续时间， 默认为 2 s    2
                     delay    延时更新时间, 0 为不延时    0
                     immediate    是否立即执行动画    true
                     options    countup配置项    下图代码
                     animateClass    执行期间动画, 执行后删除，优先级低于animatedClass    null
                     animatedClass    执行前插入, 执行后删除    animated
                     -->
                    <VueCountUp :start-value="0" :end-value="homeworkStatistics.total" duration ="2" />
                  </li>
                  <li class="pulll_left counter" >
                    <VueCountUp :start-value="0" :end-value="homeworkStatistics.completed" duration ="2" style="color: #0e94eb" />
                  </li>
                </ul>
              </div>
              <div class="barbox2">
                <ul class="clearfix">
                  <li class="pulll_left">全部作业数</li>
                  <li class="pulll_left">已完成作业数</li>
                </ul>
              </div>
            </div>
            <div class="bar">
              <div class="barbox">
                <ul class="clearfix">
                  <li class="pulll_left counter" >
                    <VueCountUp :start-value="0" :end-value="homeworkStatistics.run" duration ="2" style="color: #c440ef" />
                  </li>
                  <li class="pulll_left counter" >
                    <VueCountUp :start-value="0" :end-value="homeworkStatistics.arrearsWith" duration ="2" style="color: #ff7d01" />
                  </li>
                </ul>
              </div>
              <div class="barbox2">
                <ul class="clearfix">
                  <li class="pulll_left">进行中</li>
                  <li class="pulll_left">拖欠数</li>
                </ul>
              </div>
            </div>

          </div>
        </div>




        <div class="left-bottom rightTop border">
          <div class="title">各科分类</div>
          <div class="bottom-b">
            <div id="chart3" class="allnav"></div>
          </div>

        </div>
      </div>


      <div class="center-cen fl">
        <!--设置最大高度，高度和cen-top里面的一样-->
        <div class="cen-top rightTop border" style="max-height: 6.8rem; overflow: scroll;">

          <div class="title">今日作业</div>

          <table class="table3" >
            <thead>
            <tr>
              <th>作业名称</th>
              <th>状态</th>
              <th>学科</th>
              <th>完成次数</th>
              <th>操作</th>
            </tr>
            </thead>

            <tbody >

            <tr v-if="todayList == null || todayList.length === 0">
              <td colspan="5"><p style="width:100%;">今日没有需要完成的作业</p></td>
            </tr>
            <tr v-else v-for="item in todayList">
              <td style="width: 40%; text-align: left; padding: 0.1rem; max-width: 3rem;" >{{item.name}}</td>

              <td v-if="item.status === 10">等待执行</td>
              <td v-else-if="item.status === 20">进行中</td>
              <td v-else-if="item.status === 90">已完成</td>
              <td v-else-if="item.status === 92">已延期</td>
              <td v-else-if="item.status === 91">延期完成</td>
              <td v-else-if="item.status === 93">停止</td>

              <td>{{item.subjectName}}</td>

              <td style="color:#E548AE;" >{{item.completeNum}} / 次</td>

              <td style="width: 20%;">
                <el-link type="primary" @click="toOpenHomeworkDetailed(item)">详情</el-link>
                <el-link type="primary" @click="homeworkCompletedNormalTips(item)">完成</el-link>
              </td>
            </tr>


            </tbody>
          </table>



          <div v-if="completedTodayList != null && completedTodayList.length > 0">
            <div class="title" style="margin-top: 30px;color: #f78cf3">今日已完成作业</div>

            <table class="table3" >
              <thead>
              <tr>
                <th>作业名称</th>
                <th>状态</th>
                <th>学科</th>
                <th>完成次数</th>
                <th>操作</th>
              </tr>
              </thead>

              <tbody >


              <tr v-for="item in completedTodayList">
                <td style="width: 40%; text-align: left; padding: 0.1rem; max-width: 3rem;" >{{item.name}}</td>

                <td v-if="item.status === 10">等待执行</td>
                <td v-else-if="item.status === 20">进行中</td>
                <td v-else-if="item.status === 90"><span style="color: #e7feb8">已完成</span></td>
                <td v-else-if="item.status === 92">已延期</td>
                <td v-else-if="item.status === 91"><span style="color: #8ff9f8">延期完成</span></td>
                <td v-else-if="item.status === 93">停止</td>

                <td>{{item.subjectName}}</td>

                <td style="color:#E548AE;">{{item.completeNum}} / 次</td>

                <td style="width: 20%;">
                  <el-link type="primary" @click="toOpenHomeworkDetailed(item)">详情</el-link>
                  <!--<el-link type="primary" @click="homeworkCompletedNormalTips(item)">完成</el-link>-->
                </td>
              </tr>


              </tbody>
            </table>

          </div>



        </div>



        <div class="cen-bottom rightTop border" style="max-height: 3.2rem; overflow: scroll;">
          <div class="title">已拖欠作业</div>


          <table class="table3" >
            <thead>
            <tr>
              <th>作业名称</th>
              <th>状态</th>
              <th>学科</th>
              <th>拖欠天数</th>
              <th>操作</th>
            </tr>
            </thead>

            <tbody >

            <tr v-if="arrearsWithList == null || arrearsWithList.length === 0">
              <td colspan="5"><p style="width:100%;">今日没有拖欠的作业</p></td>
            </tr>
            <tr v-else v-for="item in arrearsWithList">
              <td style="width: 40%; text-align: left; padding: 0.1rem; max-width: 3rem;" >{{item.name}}</td>

              <td v-if="item.status === 10">等待执行</td>
              <td v-else-if="item.status === 20">进行中</td>
              <td v-else-if="item.status === 90">已完成</td>
              <td v-else-if="item.status === 92">已延期</td>
              <td v-else-if="item.status === 91">延期完成</td>
              <td v-else-if="item.status === 93">停止</td>

              <td>{{item.subjectName}}</td>

              <td style="color:#E548AE;">{{item.daysInArrears}} / 天</td>

              <td style="width: 20%; ">
                <el-link type="primary" @click="toOpenHomeworkDetailed(item)">详情</el-link>
                <el-link type="primary" @click="homeworkCompletedNormalTips(item)">完成</el-link>
              </td>
            </tr>


            </tbody>
          </table>


        </div>
      </div>


      <div class="center-right fr">
        <div class="right-top rightTop border">
          <div class="title">作业日志</div>

          <vue-seamless-scroll :data="historicalHomeworkRecords" :class-option="defaultOption" style="overflow: hidden; height: 2.4rem; max-height: 2.4rem; margin-top: 15px; ">
            <div style="text-align: left; padding: 5px;">
              <div style="color: darkorange" v-for="item in historicalHomeworkRecords">
                <span style="font-family: '微软雅黑'; color: #61a8ff">{{item.recordTime}}</span>：{{item.name}}
              </div>
            </div>


          </vue-seamless-scroll>

        </div>



        <div class="right-cen border ">
          <div class="title">作业频次</div>

          <div style="margin-top: 7px;font-size: 0.16rem;">
            <span :class="{'lineChartNotActivated': lineChartType !== 1, 'lineChartActivated': lineChartType === 1}" @click="switchLineChart(1)">日</span>
            <span :class="{'lineChartNotActivated': lineChartType !== 2, 'lineChartActivated': lineChartType === 2}" @click="switchLineChart(2)">月</span>
            <span :class="{'lineChartNotActivated': lineChartType !== 3, 'lineChartActivated': lineChartType === 3}" @click="switchLineChart(3)">年</span>
          </div>

          <!--这里的高度会影响到图标-->
          <div id="chart4" v-show="lineChartType === 1" style="height: 2.3rem; width: 100%"/>
          <div id="chart5" v-show="lineChartType === 2" style="height: 2.3rem; width: 100%"/>
          <div id="chart6" v-show="lineChartType === 3" style="height: 2.3rem; width: 100%"/>

        </div>






        <div class="right-bottom rightTop border" style="max-height: 3.2rem; overflow: scroll;">
          <div class="title">作业完成次数排行</div>


          <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
            <thead>
            <tr>
              <th scope="col">排名</th>
              <th scope="col">作业名称</th>
              <th scope="col">完成次数</th>
            </tr>
            </thead>
            <tbody>


            <tr v-if="completeNumList == null || completeNumList.length === 0">
              <td colspan="3"><p style="width:100%;">暂无数据</p></td>
            </tr>
            <tr v-else v-for="(item, index) in completeNumList">
              <td><span>{{index + 1}}</span></td>
              <td class="completeClass" >{{item.name}}</td>
              <td >{{item.num}}/次</td>
            </tr>


            </tbody>
          </table>



        </div>
      </div>
    </div>


    <HomeworkDetailed ref="HomeworkDetailedRef" />

  </div>


</template>

<script>

  import {getFullDate, getFullTime} from "../../utils/utils";
  import http from '@/utils/http'
  import VueCountUp from 'vue-countupjs'
  import HomeworkDetailed from './HomeworkDetailed.vue'
  // 局部引入
  import * as echarts from 'echarts'
  // 滚动
  import vueSeamlessScroll from 'vue-seamless-scroll'

  export default {
    name: "HomeworkViewSon",
    components:{
      VueCountUp,
      HomeworkDetailed,
      vueSeamlessScroll,
    },
    data() {
      return {
        // 当前时间
        nowTime: null,
        // 星期
        nowWeek: null,
        // 定时器,时间的
        timer: null,
        // 饼图定时器
        changePieInterval: null,
        // 家庭作业的定时器
        timerHomeworkSubmitStatistics: null,
        // 当前选中的用户
        memberFamily: {},
        // 作业数统计
        homeworkStatistics: {
          // 总数
          total: 0,
          // 已完成
          completed: 0,
          // 拖欠
          arrearsWith: 0,
          // 进行中
          run: 0,
        },
        // 今天的未完成的作业
        todayList: [],
        // 拖欠的作业
        arrearsWithList: [],
        // 今日完成的作业
        completedTodayList: [],
        // 学科名称和学科数量统计图表用到的数据
        disciplinesNameNum: {
          // 类似数据 ['张三', '李四', '王五']
          legendData: [],
          // 类似  [{name:'张三', value:300}, {name:'李四', value:300},{name:'王五', value:300},],
          seriesData: [],
        },
        // 历史作业记录
        historicalHomeworkRecords: [],
        // 滚动的属性
        defaultOption: {
          step: 0.1, // 数值越大速度滚动越快
          limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
        },
        // 完成作业次数排行
        completeNumList:[],
        // 作业单日统计
        homeworkSubmitStatisticsDay: {
          // 对应x轴和对应的数据
          xAxis:[],
          series:[],
        },
        // 作业月统计
        homeworkSubmitStatisticsMonth: {
          // 对应x轴和对应的数据
          xAxis:[],
          series:[],
        },
        // 作业年统计
        homeworkSubmitStatisticsYear: {
          // 对应x轴和对应的数据
          xAxis:[],
          series:[],
        },
        // 折线图的类型，1 天 2 月 3 年
        lineChartType: 3,
        // 定时器周期，默认15秒
        timerCycle: 15000,
      }
    },
    methods: {
      /**
       * 点击右边人员触发
       * @param memberFamily 成员信息
       */
      initUser(memberFamily) {
        this.memberFamily = memberFamily
        // 清空定时器，否则会一堆重复定时器
        this.destroyTimer()
        this.initInfo()
      },
      /**
       * 初始化的信息
       */
      initInfo(){
        this.statistics()
        this.getDisciplinesNameNum()
        this.getLast100Log()
        this.getCompleteTheMostTask()

        // 先马上执行一次
        this.switchLineChart(this.lineChartType)
        this.getTask()
        // 设置折线图的定时转换
        this.timerHomeworkSubmitStatistics = setInterval(() => {
          console.log("开始定时器，获取作业和折线图")

          // 定时器处理
          if (this.lineChartType === 1){
            this.lineChartType = 2

          } else if (this.lineChartType === 2){
            this.lineChartType = 3

          } else if (this.lineChartType === 3){
            this.lineChartType = 1
          }
          this.switchLineChart(this.lineChartType)
          // 每10秒也获取一次作业情况
          this.getTask()

        }, this.timerCycle);
      },
      /**
       * 切换折线图
       * @param item
       */
      switchLineChart(item){
        this.lineChartType = item
        if (item === 1){
          this.getHomeworkSubmitStatisticsDay()
        } else if (item === 2){
          this.getHomeworkSubmitStatisticsMonth()
        } else if (item === 3){
          this.getHomeworkSubmitStatisticsYear()
        }
      },
      /**
       * 根据家庭成员ID 获取完成次数做多的作业10条
       */
      getCompleteTheMostTask(){
        http.post("/homework/getCompleteTheMostTask", {
          memberFamilyId: this.memberFamily.id
        }).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            // 401是token过期跳转的
            if (res.code !== 401) {
              this.$message.error(res.msg);
            }
            return
          }
          this.completeNumList = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 根据家庭成员ID获取最近执行的100条家庭作业记录
       */
      getLast100Log(){
        http.post("/homework/getLast100Log", {
          memberFamilyId: this.memberFamily.id
        }).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            // 401是token过期跳转的
            if (res.code !== 401) {
              this.$message.error(res.msg);
            }
            return
          }
          this.historicalHomeworkRecords = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 获取过去5天的作业提交数量
       */
      getHomeworkSubmitStatisticsDay(){
        http.post("/homework/getHomeworkSubmitStatisticsDay", {
          memberFamilyId: this.memberFamily.id
        }).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            // 401是token过期跳转的
            if (res.code !== 401) {
              this.$message.error(res.msg);
            }
            return
          }
          if (res.data){
            // x 轴
            let xAxis = []
            // 数量
            let series = []
            for (let bean of res.data){
              xAxis.push(bean.day)
              series.push(bean.submitNum)
            }
            // 数据汇总
            this.homeworkSubmitStatisticsDay.xAxis = xAxis
            this.homeworkSubmitStatisticsDay.series = series
          }

          this.initHomeworkSubmitStatisticsDay()

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 初始化每天作业完成折线图
       */
      initHomeworkSubmitStatisticsDay(){
        // 下面这一段注释掉的代码解决有些不刷新的问题，显示一半的问题
        let html = document.getElementById('chart4');
        if (html == null){
          this.destroyTimer()
          return
        }
        document.getElementById('chart4').removeAttribute('_echarts_instance_');
        let myChart = echarts.init(document.getElementById('chart4'));
        let option = {
          xAxis: {
            type: 'category',
            data: this.homeworkSubmitStatisticsDay.xAxis,
            axisLabel: {
              // 文本颜色，轴上的颜色
              color: '#4c9bfd'
            },
          },
          // 控制直角坐标系与容器上下左右的距离.这个没调好则图像可能挤一起
          grid: {
            left: '3%',
            right: '5%',
            bottom: '5%',
            top: '5%',
            containLabel: true,//gid区域是否包含坐标轴的刻度标签。
          },

          yAxis: {
            type: 'value',
            axisLabel: {
              // 文本颜色，轴上的颜色
              color: '#4c9bfd'
            },
          },
          series: [
            {
              data: this.homeworkSubmitStatisticsDay.series,
              type: 'line',
              smooth: true,
              itemStyle: {
                // 线条颜色
                color: '#00f2f1'  // 线颜色
              }
            }
          ]
        };
        myChart.setOption(option)
      },
      /**
       * 获取作业提交统计,按月
       */
      getHomeworkSubmitStatisticsMonth(){
        http.post("/homework/getHomeworkSubmitStatisticsMonth", {
          memberFamilyId: this.memberFamily.id
        }).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            // 401是token过期跳转的
            if (res.code !== 401) {
              this.$message.error(res.msg);
            }
            return
          }
          if (res.data){
            // x 轴
            let xAxis = []
            // 数量
            let series = []
            for (let bean of res.data){
              xAxis.push(bean.month)
              series.push(bean.submitNum)
            }
            // 数据汇总
            this.homeworkSubmitStatisticsMonth.xAxis = xAxis
            this.homeworkSubmitStatisticsMonth.series = series
          }

          this.initHomeworkSubmitStatisticsMonth()

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 初始化每月作业完成折线图
       */
      initHomeworkSubmitStatisticsMonth(){
        let html = document.getElementById('chart5');
        if (html == null){
          this.destroyTimer()
          return
        }
        // 下面这一段注释掉的代码解决有些不刷新的问题，显示一半的问题
        document.getElementById('chart5').removeAttribute('_echarts_instance_');
        let myChart = echarts.init(document.getElementById('chart5'));
        let option = {
          xAxis: {
            type: 'category',
            data: this.homeworkSubmitStatisticsMonth.xAxis,
            axisLabel: {
              // 文本颜色，轴上的颜色
              color: '#4c9bfd'
            },
          },
          // 控制直角坐标系与容器上下左右的距离.这个没调好则图像可能挤一起
          grid: {
            left: '3%',
            right: '5%',
            bottom: '5%',
            top: '5%',
            containLabel: true,//gid区域是否包含坐标轴的刻度标签。
          },

          yAxis: {
            type: 'value',
            axisLabel: {
              // 文本颜色，轴上的颜色
              color: '#4c9bfd'
            },
          },
          series: [
            {
              data: this.homeworkSubmitStatisticsMonth.series,
              type: 'line',
              smooth: true,
              itemStyle: {
                // 线条颜色
                color: '#ed3f35'  // 线颜色
              }
            }
          ]
        };
        myChart.setOption(option)
      },
      /**
       * 获取作业提交统计,按年
       */
      getHomeworkSubmitStatisticsYear(){
        http.post("/homework/getHomeworkSubmitStatisticsYear", {
          memberFamilyId: this.memberFamily.id
        }).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            // 401是token过期跳转的
            if (res.code !== 401) {
              this.$message.error(res.msg);
            }
            return
          }
          if (res.data){
            // x 轴
            let xAxis = []
            // 数量
            let series = []
            for (let bean of res.data){
              xAxis.push(bean.year)
              series.push(bean.submitNum)
            }
            // 数据汇总
            this.homeworkSubmitStatisticsYear.xAxis = xAxis
            this.homeworkSubmitStatisticsYear.series = series
          }

          this.initHomeworkSubmitStatisticsYear()

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 初始化每月作业完成折线图
       */
      initHomeworkSubmitStatisticsYear(){
        let html = document.getElementById('chart6');
        if (html == null){
          this.destroyTimer()
          return
        }
        // 下面这一段注释掉的代码解决有些不刷新的问题，显示一半的问题
        document.getElementById('chart6').removeAttribute('_echarts_instance_');
        let myChart = echarts.init(document.getElementById('chart6'));
        let option = {
          xAxis: {
            type: 'category',
            data: this.homeworkSubmitStatisticsYear.xAxis,
            axisLabel: {
              // 文本颜色，轴上的颜色
              color: '#4c9bfd'
            },
          },
          // 控制直角坐标系与容器上下左右的距离.这个没调好则图像可能挤一起
          grid: {
            left: '3%',
            right: '5%',
            bottom: '5%',
            top: '5%',
            containLabel: true,//gid区域是否包含坐标轴的刻度标签。
          },

          yAxis: {
            type: 'value',
            axisLabel: {
              // 文本颜色，轴上的颜色
              color: '#4c9bfd'
            },
          },
          series: [
            {
              data: this.homeworkSubmitStatisticsYear.series,
              type: 'line',
              smooth: true,
              itemStyle: {
                // 线条颜色
                color: '#f0c725'  // 线颜色
              }
            }
          ]
        };
        myChart.setOption(option)
      },
      /**
       * 获取学科作业数量和名称
       */
      getDisciplinesNameNum(){
        http.post("/homework/getDisciplinesNameNum", {
          memberFamilyId: this.memberFamily.id
        }).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            // 401是token过期跳转的
            if (res.code !== 401) {
              this.$message.error(res.msg);
            }
            return
          }
          if (res.data){
            // 分类
            let title = []
            // 分类科目数量
            let content = []
            for (let bean of res.data){
              title.push(bean.name)
              let obj = {'name': bean.name, 'value': bean.num}
              content.push(obj)
            }
            // 数据汇总
            this.disciplinesNameNum.legendData = title
            this.disciplinesNameNum.seriesData = content
          }

          this.initDisciplinesNameNum()

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 初始化 学科分类的饼图
       */
      initDisciplinesNameNum(){
        let html = document.getElementById('chart3');
        if (html == null){
          this.destroyTimer()
          return
        }
        let myChart = echarts.init(document.getElementById('chart3'));
        let option = {
          title: {
            // text: '学科作业数量统计',
            // subtext: '学科/数量',
            // left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            type: 'scroll',
            // 右边的小图表横向还是竖着
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            textStyle: {
              // 右边的文字颜色
              color: '#00d8ff',
            },
            // 图表为圆形，默认为长方形
            icon: "circle",
            data: this.disciplinesNameNum.legendData
          },
          series: [
            {
              name: '学科作业数量',
              color: ["#9F17FF", "#00FFFF", "#F76F01", "#00FFA8", "#FFE400",  "#01A4F7", "#FEE449", "#FE2C8A"],
              // color: ['#22c4ff', '#1ee7d4', '#ffb743', '#ff7943', '#ffe0ab', '#6bc5f4', '#c08ef2', '#ffda49'],
              type: 'pie',
              label: {
                // 指示器文字颜色
                color: "#FEE449"
              },
              radius: '55%',
              center: ['40%', '50%'],
              data: this.disciplinesNameNum.seriesData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ],
        };
        myChart.setOption(option)
        // 饼图自动轮播
        this.handleChartLoop(option, myChart)
      },
      /**
       * 饼图自动轮播
       * 鼠标覆盖饼图时停止自动轮播并高亮当前项，鼠标移出时继续从当前项重新开始轮播
       * @param option
       * @param myChart
       */
      handleChartLoop(option, myChart) {
        if (!myChart) {
          return
        }
        let currentIndex = -1 // 当前高亮图形在饼图数据中的下标
        this.changePieInterval = setInterval(selectPie, 1000) // 设置自动切换高亮图形的定时器

        // 取消所有高亮并高亮当前图形
        function highlightPie() {
          // 遍历饼图数据，取消所有图形的高亮效果
          for (let idx in option.series[0].data) {
            myChart.dispatchAction({
              type: 'downplay',
              seriesIndex: 0,
              dataIndex: idx
            })
          }
          // 高亮当前图形
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: currentIndex
          })
        }

        // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
        myChart.on('mouseover', (params) => {
          clearInterval(this.changePieInterval)
          currentIndex = params.dataIndex
          highlightPie()
        })

        // 用户鼠标移出时，重新开始自动切换
        myChart.on('mouseout', (params) => {
          if (this.changePieInterval) {
            clearInterval(this.changePieInterval)
          }
          this.changePieInterval = setInterval(selectPie, 1000)
        })

        // 高亮效果切换到下一个图形
        function selectPie() {
          let dataLen = option.series[0].data.length
          currentIndex = (currentIndex + 1) % dataLen
          highlightPie()
        }
      },
      /**
       * 查看详情
       */
      toOpenHomeworkDetailed(homework){
        this.$refs.HomeworkDetailedRef.openHomeworkDetailed(homework)
      },
      /**
       * 作业签收前置提示,自动判断是否延期
       * @param homework 作业
       */
      homeworkCompletedNormalTips(homework){
        this.$confirm('确认提交完成吗?', '提示', {
          confirmButtonText: '确定提交',
          cancelButtonText: '取消提交',
          type: 'warning'
        }).then(() => {
          // 确定提交
          this.homeworkCompletedNormal(homework)

        }).catch(() => {
          // 取消提交
        });
      },
      /**
       * 作业签收前置提示,自动判断是否延期
       * @param homework 作业
       */
      homeworkCompletedNormal(homework){
        http.post("/homework/homeworkCompletedNormal", {
          homeworkId: homework.id
        }).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            // 401是token过期跳转的
            if (res.code !== 401) {
              this.$message.error(res.msg);
            }
            return
          }

          // 刷新
          this.switchLineChart(this.lineChartType)
          this.getTask()
          this.statistics()
          this.getCompleteTheMostTask()

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 获取指定家庭成员今天待做的作业和已逾期的作业
       */
      getTask(){
        http.post("/homework/getTask", {
          memberFamilyId: this.memberFamily.id
        }).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            // 401是token过期跳转的
            if (res.code !== 401) {
              this.$message.error(res.msg);
            }
            return
          }

          if (res.data != null){
            this.todayList = res.data.todayList
            this.arrearsWithList = res.data.arrearsWithList
            this.completedTodayList = res.data.completedTodayList
          }

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 统计作业数据
       */
      statistics() {
        http.post("/homework/statistics", {
          memberFamilyId: this.memberFamily.id
        }).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            // 401是token过期跳转的
            if (res.code !== 401) {
              this.$message.error(res.msg);
            }
            return
          }

          this.homeworkStatistics = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 获取服务器当前时间
       */
      getTime() {
        http.get("/home/getTime", {}).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            // 401是token过期跳转的
            if (res.code !== 401) {
              this.$message.error(res.msg);
            }
            return
          }
          this.timeShow(new Date(res.data))

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 展示时间
       * @param date 从后台获取的服务器时间
       */
      timeShow(date) {
        // 先清理一次定时器，防止重复
        clearInterval(this.timer)
        // 需要计时器
        // 给它每秒执行一次 这样我们的数据才会一直走动
        this.timer = setInterval(() => {
          // 定时器处理
          this.timeAnalyse(date)
          this.getWeek(date)
        }, 1000);
      },
      /**
       * 获取星期
       * @return {string}
       */
      getWeek(date) {
        let addTime = new Date(date.setSeconds(date.getSeconds() + 1));
        this.nowWeek = "星期" + "日一二三四五六".charAt(addTime.getDay())
      },
      /**
       * 时间解析
       * @param date 要解析的时间
       */
      timeAnalyse(date) {
        // addtime 定义的一个变量 用来接收自动累加的时间
        // 设置秒
        let addTime = new Date(date.setSeconds(date.getSeconds() + 1));
        let yMd = addTime.getFullYear() + '-' + (addTime.getMonth() + 1).toString().padStart(2, '0') + '-' + addTime.getDate().toString().padStart(2, '0');
        let times = addTime.getHours().toString().padStart(2, '0') + ':' + addTime.getMinutes().toString().padStart(2, '0') + ':' + addTime.getSeconds().toString().padStart(2, '0');
        this.nowTime = yMd + '   ' + times;
      },
      /**
       * 销毁定时器
       */
      destroyTimer(){
        console.log("清空定时器")
        clearInterval(this.changePieInterval)
        clearInterval(this.timerHomeworkSubmitStatistics)
      },
    },
    /**
     * 销毁组件的时候
     */
    destroyed() {
      // 清空定时器
      this.destroyTimer()
    },
    mounted() {
      this.getTime()
    },
    computed: {

    },
  }
</script>

<style scoped>


  /*wodry*/

  .adjecting {
    display: inline-block;
    position: relative;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin-x: 50%;
  }

  .adjecting .front-face, .adjecting .back-face {
    display: inline-block;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .adjecting .front-face {
    position: absolute;
  }

  .adjecting .back-face {
    position: relative;
  }


  /*index*/


  /*
  头部*/
  .header {
    width: 100%;
    height: 1.5rem;
    /*background: red;*/

  }

  .header .header-left {
    width: 25%;
    height: 1.05rem;
    /*height: 1rem;*/
    color: white;
    /*    border: 1px solid green;*/
    text-align: center;
    line-height: 1.05rem;
  }

  .header .header-center {
    width: 50%;
    height: 1.2rem;
    /*height: 0.8rem;*/
    /*border: 1px solid red;*/
    /*    background: url("../images/head.gif") no-repeat;
        background-size: 100% 100%;*/
    position: relative;
  }

  .header .header-center .header-title {
    text-align: center;
    color: #ffffff;
    font-size: .4rem;
    /*font-size: .3rem;*/
    text-shadow: 0 0 .3rem #00d8ff;
    line-height: 1.05rem;
    /*line-height: 0.8rem;*/
  }

  .header .header-img {
    background: url("../../assets/images/homework/head.gif") no-repeat center center;
    background-size: 100%;
    height: 100%;
    width: 100%;
    position: absolute;
    top: .4rem;
  }

  .header .header-right {
    width: 25%;
    height: 1.05rem;
    /*border: 1px solid gold;*/
  }

  .header .header-bottom {
    width: calc(100% - .4rem);
    height: .16rem;
    background: url("../../assets/images/homework/header.png") no-repeat;
    background-size: calc(100% - .2rem) 100%;
    padding: 0 .2rem;
    margin-left: .3rem;

  }

  /*
  内容*/
  .center {
    padding: .1rem .2rem .1rem .2rem;
  }

  .center .center-left {
    width: 25%;
    padding: .1rem;
    /*    border: 1px solid red;*/

  }

  .center .center-left .left-top {
    width: 100%;
    height: 3.2rem;
    margin-bottom: .4rem;
    /*background: url("../images/panel.png") no-repeat;
    background-size: 100% 100%;*/
    /*transform-style: preserve-3d;*/
    /*    border: 0.01rem solid #217093;
        position: relative;
        overflow: hidden;*/
  }

  .center .center-left .left-top h1 {
    color: white;
    font-size: .4rem;
    transform: rotateX(0deg);
    /*display: flex;*/
    align-items: center;
    margin-bottom: 8px;
    position: relative;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    /*transform: rotateX(0deg);*/
    /*width: 100%;*/
    transition: transform 500ms cubic-bezier(0.15, 0.52, 0.5, 0.9) 0s;
    /*height: 24px;*/
    /*过渡效果*/
    transition: all 1s;
  }

  /*.center .center-left .left-top h1:hover{
      transform: rotateX(360deg);
      transition: all 2s;
  }*/

  .title {
    width: 90%;
    height: 0.3rem;
    /*    border: 1px solid gold;*/
    position: relative;
    top: .1rem;
    left: .25rem;
    color: white;
    padding-left: 0.12rem;
    line-height: 0.3rem;

  }

  .title:before {
    width: 0.05rem;
    height: 0.25rem;
    top: 0.02rem;
    position: absolute;
    content: "";
    background: #59ebe8;
    border-radius: 0.02rem;
    left: 0;
  }

  .top-list p {
    font-size: .18rem;
    color: #029698;
    padding: .3rem;
  }

  .top-list li {
    float: left;
    font-size: .2rem;
    color: #ffffff;
    width: 50%;
    height: .4rem;
    line-height: .4rem;
    padding: .2rem;
  }

  .memberFamilyInfo {
    /*float: left;*/
    font-size: .2rem;
    color: #ffffff;
    width: 50%;
    height: .4rem;
    line-height: .4rem;
    padding: .2rem;
    text-align: left;
    margin-left: .2rem;
    /*color: #029698;*/
  }

  /*经典名言*/
  .memberFamilyClassicQuotes {
    font-size: .18rem;
    color: #029698;
    padding: .3rem;
  }

  .center .center-left .left-cen {
    width: 100%;
    height: 3.2rem;
    margin-bottom: .4rem;
    /*background: url("../images/panel.png") no-repeat;
    background-size: 100% 100%;*/
    /*border: 0.01rem solid #217093;*/
  }

  .center .center-left .left-cen .company {
    width: calc(100% - .2rem);
    height: calc(100% - .6rem);
    margin-left: .1rem;
    margin-top: .1rem;
    /*border: 1px solid red;*/
    padding: .2rem;
    box-sizing: border-box;
  }

  .center .center-left .left-cen .company li {
    color: white !important;
    height: .3rem;
    line-height: .3rem;
  }

  /*.center .center-left .left-cen .company .wodryRX0 span{
      background: red;
  }*/


  .center .center-left .left-bottom {
    width: 100%;
    height: 3.2rem;
    /*background: url("../images/panel.png") no-repeat;
    background-size: 100% 100%;*/
    /*border: 0.01rem solid #217093;*/
  }

  .center .center-left .bottom-b {
    width: calc(100% - 0.2rem);
    height: 2.6rem;
    margin-left: 0.1rem;
    margin-top: 0.1rem;
  }

  .center .center-cen {
    width: 50%;
    padding: .1rem;
  }

  .center .center-cen .cen-top {
    width: 100%;
    height: 6.8rem;
    /*background: url("../images/a.png") no-repeat;
    background-size: 100% 100%;*/
    /*border: 0.01rem solid #217093;*/
    margin-bottom: .4rem;
    position: relative;
  }


  .center .center-cen .cen-top .top-title {
    position: absolute;
    width: 35%;
    height: 1.5rem;
    /*border: 1px solid red;*/
    left: .5rem;
    top: .5rem;
  }

  .center .center-cen .cen-top .top-title li {
    float: left;
    width: 50%;
    height: 1rem;
    /*border: 1px solid green;*/
  }

  .center .center-cen .cen-top .top-title li p,
  .center .center-cen .cen-top .top-title li span,
  .center .center-cen .cen-top .top-title li b {
    color: #ffffff;
  }

  .center .center-cen .cen-top .top-title li p {
    padding: .1rem;
  }

  .center .center-cen .cen-top .top-title li span {
    text-align: center;
    display: inline-block;
    width: .35rem;
    height: .45rem;
    background: #37a9ea;
    margin-left: .1rem;
    line-height: .4rem;
    font-size: .3rem;
    margin-top: .1rem;
  }

  .center .center-cen .cen-top .top-bottom {
    width: 100%;
    height: 4.8rem;
    /*border: 1px solid red;*/
    position: absolute;
    top: 1.6rem;
    padding: .2rem;
    /*overflow: hidden;*/
  }


  .center .center-cen .cen-bottom {
    width: 100%;
    height: 3.2rem;

    /*border: 0.01rem solid #217093;*/
  }

  .center .center-cen .bottom-b {
    width: calc(100% - 0.2rem);
    height: 2.6rem;
    margin-left: 0.1rem;
    margin-top: 0.1rem;
  }

  .center .center-right {
    width: 25%;
    padding: .1rem;
  }

  .center .center-right .right-top {
    width: 100%;
    height: 3.2rem;
    margin-bottom: .4rem;
    /*border: 0.01rem solid #217093;*/
  }

  .center .center-right .right-cen {
    width: 100%;
    height: 3.2rem;
    margin-bottom: .4rem;
    /*border: 0.01rem solid #217093;*/
    border: 1px solid #0bc4e9;
    background: rgba(0, 72, 115, 0.28);
    transition: all 1s;
    cursor: pointer;
    position: relative;
  }

  .center .center-right .right-cen .right-cen-cent {
    width: calc(100% - 0.2rem);
    height: 2.6rem;
    margin-left: 0.1rem;
    margin-top: 0.1rem;
  }

  .center .center-right .right-bottom {
    width: 100%;
    height: 3.2rem;
    /*border: 0.01rem solid #217093;*/
  }

  .center .center-right .right-bottom .chat {
    /*    width: calc(100% - .2rem);
        height: calc(100% - .6rem);
        margin-top: .1rem;
        margin-left: .1rem;
        padding: .1rem;*/
    width: calc(100% - 0.2rem);
    height: 2.6rem;
    margin-left: 0.1rem;
    margin-top: 0.1rem;
    /*overflow: hidden;*/
  }


  .gun {
    /* width: 100%;*/
    margin-top: .2rem;
  }

  .gun span {
    display: block;
    float: left;
    height: .2rem;
    width: 33%;
    /*background: red;*/
    /*margin: 15px 10px 10px 10px;*/
    /*padding: 20px;*/
    text-align: center;
    font-size: 0.14rem;
    font-weight: 600;
    color: #61d2f7;
    text-align: center;
    margin-bottom: .1rem;
  }

  #FontScroll {
    width: 100%;
    height: 2.3rem;
    overflow: hidden;
    /*float: left;*/
    margin-top: .1rem;
    /*margin: 0 5%;*/
    /*margin-left: 50px;*/

    /*background: gold;*/

  }

  #FontScroll ul li {
    height: .32rem;
    width: 100%;
    color: #ffffff;
    text-align: center;
    line-height: .32rem;
    /*border-bottom: 1px dashed #404040;*/
    /*width:33.3%;*/
    overflow: hidden;
    font-size: 0.14rem;
    /*border-bottom: 1px dashed #404040;*/
    /*width:33.3%;*/


    /*background: red;
    margin: 0 2%;*/

  }

  #FontScroll ul li:nth-child(1) {
    /*background-color: #072951;*/
    box-shadow: -10px 0px 15px #034c6a inset, /*左边阴影*/ 10px 0px 15px #034c6a inset;

  }

  #FontScroll ul li:hover {
    box-shadow: -10px 0px 15px #034c6a inset, /*左边阴影*/ 10px 0px 15px #034c6a inset;
    cursor: pointer;
  }

  .fontInner span {
    display: inline-block;
    /*float: left;*/
    /*height: 20px;*/
    width: 31%;
    color: #ffffff;

    /*background: red;*/

  }

  .fontInner span b {
    display: inline-block;
    width: .2rem;
    height: .2rem;
    border-radius: 0.03rem;
    color: #ffffff;
    line-height: .2rem;
  }

  /*#FontScroll ul li:nth-child(1) .fontInner span b{
      background: #EB6841

  }*/

  #FontScroll ul li:nth-child(8n-4) .fontInner span b {
    background: #20a8fe
  }

  #FontScroll ul li:nth-child(8n-3) .fontInner span b {
    background: #EB6841
  }

  #FontScroll ul li:nth-child(8n-2) .fontInner span b {
    background: #3FB8AF
  }

  #FontScroll ul li:nth-child(8n-1) .fontInner span b {
    background: #FE4365
  }

  #FontScroll ul li:nth-child(8n-5) .fontInner span b {
    background: #FC9D9A
  }

  #FontScroll ul li:nth-child(8n-6) .fontInner span b {
    background: #EDC951
  }

  #FontScroll ul li:nth-child(8n-7) .fontInner span b {
    background: #C8C8A9
  }

  #FontScroll ul li:nth-child(8n) .fontInner span b {
    background: #83AF9B
  }

  #FontScroll ul li:first-child .fontInner span b {
    background: #036564
  }

  #FontScroll ul li:last-child .fontInner span b {
    background: #3299BB
  }


  /*public css*/

  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
  }

  *, .main {
    padding: 0px;
    margin: 0px;
    color: #ffffff; /*font-family: "微软雅黑";*/
  }

  /*html,body{*/
  .main {
    background: url("../../assets/images/homework/bg.png") no-repeat;
    background-size: cover;
    font-size: .16rem;
    color: #ffffff;
    position: relative;
    width: 100%;
    height: 100%;
    font-family: myFirstFont !important;
  }

  .fl {
    float: left;
  }

  .fr {
    float: right;
  }

  ul, ol {
    list-style: none;
  }

  .allnav {
    height: 100%;
  }

  @font-face {
    font-family: myFirstFont;
    src: url('../../assets/images/homework/DISPLAY_FREE_TFB.ttf')
  }

  /*谷哥滚动条样式*/

  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    position: absolute
  }

  ::-webkit-scrollbar-thumb {
    background-color: #5bc0de
  }

  ::-webkit-scrollbar-track {
    background-color: #ddd
  }

  /***/
  .allnav {
    height: 100%;
  }


  /*第三栏头部*/
  .rightTop {
    width: 100%;
    /*height: 450px;*/
    position: relative;
    border: 1px solid #0bc4e9;
    background: rgba(0, 72, 115, 0.28);
    transition: all 1s;
    cursor: pointer;
  }

  /*边框公共样式*/
  .border:before {
    content: '';
    position: absolute;
    width: 80%;
    height: 100%;
    bottom: -1px;
    top: -1px;
    left: 10%;
    border-bottom: 1px solid #007297;
    border-top: 1px solid #007297;
    transition: all 0.5s;
  }

  .border:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 80%;
    left: -1px;
    right: -1px;
    top: 10%;
    border-left: 1px solid #007297;
    border-right: 1px solid #007297;
    transition: all 0.5s;
  }

  .border:hover::before {
    width: 0%;
  }

  .border:hover::after {
    height: 0%;
  }

  .border:hover {
    box-shadow: -5px 0px 2px rgba(255, 255, 255, 0.1), /*左边阴影*/ 0px -5px 2px rgba(255, 255, 255, 0.1), /*上边阴影*/ 5px 0px 2px rgba(255, 255, 255, 0.1), /*右边阴影*/ 0px 5px 2px rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.1);
  }

  .border h4 {
    margin: 15px 0 5px 20px;
    color: #8adeff;
    line-height: 35px;
    font-size: 18px;
    font-weight: 500;
  }


  /* 鼠标特效 */
  * {
    cursor: url('../../assets/images/homework/pointer.png') 8 3, auto !important;
  }


  /*统计部分 start*/
  .bar {
    /*background: rgba(101, 132, 226, .1);*/
    padding: .30rem;
  }

  .barbox li, .barbox2 li {
    width: 50%;
    text-align: center;
    position: relative;
  }

  .barbox:before,
  .barbox:after {
    position: absolute;
    width: .3rem;
    height: .1rem;
    content: "";
  }

  .barbox:before {
    border-left: 2px solid #02a6b5;
    left: 0;
    border-top: 2px solid #02a6b5;
  }

  .barbox:after {
    border-right: 2px solid #02a6b5;
    right: 0;
    bottom: 0;
    border-bottom: 2px solid #02a6b5;
  }

  .barbox li:first-child:before {
    position: absolute;
    content: "";
    height: 50%;
    width: 1px;
    background: rgba(255, 255, 255, .2);
    right: 0;
    top: 25%;
  }

  .barbox {
    border: 1px solid rgba(25, 186, 139, .17);
    position: relative;
  }

  .barbox li {
    font-size: .3rem;
    color: #ffeb7b;
    padding: .05rem 0;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-weight: bold;
  }

  .barbox2 li {
    font-size: .19rem;
    color: #637c9f;
    padding-top: .1rem;
  }

  .clearfix:after, .clearfix:before {
    display: table;
    content: " "
  }

  .clearfix:after {
    clear: both
  }

  .pulll_left {
    float: left;
  }

  .barbox2 li {
    font-size: .19rem;
    color: #637c9f;
    padding-top: .1rem;
  }

  .barbox li, .barbox2 li {
    width: 50%;
    text-align: center;
    position: relative;
  }

  /*统计部分 end */


  /*时间 start */
  .weather-box {
    /*width: 4.1rem;*/
    font-family: "微软雅黑";
    height: 1.1rem;
    /*border: 1px solid #0E94EA;*/
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
  }

  .data>p.time {
    font-size: 0.32rem;
    height: 0.42rem;
    line-height: 0.42rem;
  }

  .weather-box>.weather {
    width: 7rem;
    /*width: 0.2rem;*/
    height: 0.65rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    margin-left: 10px;
  }

  .weather>img {
    height: 100%;
  }
  /*时间 end */


  /*表格 start */


  tbody {
    max-height: 6.5rem;
    overflow-y: scroll;
  }

  .table3 {
    font-family: 微软雅黑;
    font-size: 0.16rem;
    border: 1px solid #0e94ea;
    border-top: none;
    margin: 10px;
    width: 97%;
    /*边框的细线*/
    border-collapse:collapse;
    border-spacing:0;
  }

  .table3 thead tr {
    background: rgba(14, 148, 234, 0.4);
  }

  .table3 thead tr th {
    border-right: none;
    color: #0EFCFF;
  }

  .table3 tr {
    border-top: 1px solid #0e94ea;
    background: rgba(14, 148, 234, 0.1);
  }

  .table3 tr td,
  .table3 tr th {
    border: 1px solid #0e94ea;
    height: 0.4rem;
    line-height: 0.4rem;
    color: #61a8ff;
    text-align: center;
  }

  /*表格 end */



  .table1 {
    margin-top: 10px;
    padding: 5px;
  }

  /*作业完成次数表头*/
  .table1 th {
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .6);
    font-weight: normal;
  }

  .table1 td {
    /*font-size: 16px;*/
    color: rgba(255, 255, 255, .4);
    padding: 10px 0 0 0;
  }

  .table1 span {
    width: 0.4rem;
    border-radius: 3px;
    font-family: 微软雅黑;
    display: block;
    background: #878787;
    color: #fff;
    font-size: .2rem;
    /*居中*/
    margin: auto;
    /*text-align: center;*/
  }

  .table1 tr:nth-child(1) span {
    background: #ed405d
  }

  .table1 tr:nth-child(2) span {
    background: #f78c44
  }

  .table1 tr:nth-child(3) span {
    background: #49bcf7
  }

  .completeClass{
    width: 40%;
    text-align: left;
    padding: 0.1rem;
    max-width: 3rem;
    font-family: 微软雅黑;
  }



  /*作业完成频次*/


  /*折线图没激活之前*/
  .lineChartNotActivated {
    color: rgba(255, 255, 255, .6)
  }

  /*折线图激活被选中的时候*/
  .lineChartActivated {
    color: #01F2F4
  }



</style>

